<!-- Dom模板 -->
<template>
  <div class="addItemMain">
    <!-- Dom内容 -->
    <div class="tabTitle">
      <div>
        <button @click="turnClick">返回</button>
      </div>
    </div>
    <div class="addItemContent">
      <p class="pleaceTishi">订单详情</p>
      <table>
        <tr>
          <td>
            <p>订单编号：</p>
          </td>
          <td>
            <p>{{ itemData.orNum }}</p>
          </td>
        </tr>
        <tr>
          <td>用户昵称：</td>
          <td>
            <p>{{ itemData.heir }}</p>
          </td>
        </tr>
        <tr>
          <td>手机号：</td>
          <td>
            <p>{{ itemData.order }}</p>
          </td>
        </tr>
        <tr>
          <td>课程名称：</td>
          <td>
            <p>{{ itemData.name }}</p>
          </td>
        </tr>
        <tr>
          <td>订单金额：</td>
          <td>
            <p>{{ itemData.price }}</p>
          </td>
        </tr>
        <tr>
          <td>订单状态：</td>
          <td>
            <p>
              {{
                itemData.states === 2
                  ? "待退款"
                  : itemData.states === 3
                  ? "已退款"
                  : itemData.states === 4
                  ? "未退款"
                  : itemData.states === 1
                  ? "已购买"
                  : ""
              }}
            </p>
          </td>
        </tr>
        <tr>
          <td>提交时间：</td>
          <td>
            <p>{{ itemData.ubloadTime }}</p>
          </td>
        </tr>
        <tr>
          <td>处理时间：</td>
          <td>
            <p>{{ itemData.ubloadTime }}</p>
          </td>
        </tr>
      </table>
      <div class="isOk" v-if="itemData.states == 2">
        <button @click="yesTuik(itemData)">确定退款</button>
        <button @click="noTuik(itemData)">取消退款</button>
      </div>
      <div
        class="isOk"
        v-if="
          itemData.states == 1 || itemData.states == 3 || itemData.states == 4
        "
      >
        <button @click="addOkClick">确认</button>
        <button @click="turnClick">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as api from "../../../api/getSomeList";

export default {
  name: "",
  data() {
    return {
      msg: "测试",
      dataList: [],
      itemData: {},
      states: "",
      ubloadTime: 0, // 现在的时间
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */

.tabTimu span {
  font-size: 14px;
  cursor: pointer;
}
.tabTimu .spanActive {
  font-size: 16px;
  font-weight: bold;
}
.addItemContent {
  padding: 20px;
  height: 700px;
  overflow-y: auto;
  background-color: #fff;
}
table tr td:nth-child(1) {
  width: 90px;
  padding: 20px 0;
  font-weight: bold;
  font-size: 13px;
  text-align: right;
  padding-right: 20px;
}

.pleaceTishi {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #e6e2e2;
}

.tabTitle {
  padding: 20px 8px;
  margin: 20px 0;
  background-color: #fff;
}
.tabTitle button {
  font-size: 14px;
  color: #fff;
  background-color: #38a189;
  border: 1px solid #38a189;
  border-radius: 4px;
  padding: 4px 14px;
  cursor: pointer;
}
/* 点击确定 */
.isOk {
  margin-top: 20px;
  padding: 20px;
}
.isOk button {
  font-size: 14px;
  color: #fff;
  background-color: #38a189;
  border: 1px solid #38a189;
  border-radius: 2px;
  padding: 0px 20px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  margin: 4px;
}
.isOk button:nth-child(2) {
  font-size: 14px;
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 0px 20px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
}
</style>